<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui"/>
  <title>Mojito</title>
  <script src="../js/base.js"></script>
  <link rel="stylesheet" href="../plugins/vant/vant.min.css">
  <link rel="stylesheet" href="../styles/common.css"/>
  <link rel="stylesheet" href="../styles/order-detail.css"/>
</head>
<body>
  <div id="order_detail" class="app">
    <div class="divHead">
      <div class="divTitle">
        <i @click="goBack"><van-icon name="arrow-left" /></i>订单详情
      </div>
    </div>
    <div class="divContent">
      <div class="status">
        <div class="short" @click="orderTrackShow=true">
          {{getStatus(order.status).short}}<i><van-icon name="arrow" /></i>
        </div>
        <div class="long">{{getStatus(order.status).long}}</div>
        <div class="btnAgain" @click="addOrderAgain">再来一单</div>
      </div>
      <div class="order">
        <div class="itemList">
          <div class="item" v-for="(item,index) in order.details" :key="index">
            <van-image :src="getImage(item.image)">
              <template v-slot:error></template>
            </van-image>
            <div class="desc">
              <div class="name">{{item.name}}</div>
              <div class="config">{{item.config}}</div>
              <div class="number">x{{item.number}}</div>
            </div>
            <div class="price">
              <span class="spanMoney">￥</span>{{item.amount}}
            </div>
          </div>
          <div class="deliveryPrice">
            <div>配送费</div>
            <div class="price">
              <span class="spanMoney">￥</span>3
            </div>
          </div>
        </div>
        <div class="divSplit"></div>
        <div class="subTotal">
          小计 ￥<span class="amount">{{order.amount}}</span>
        </div>
      </div>
      <div class="address">
        <div class="item">
          <div class="label">期望时间</div>
          <div class="content">立即配送</div>
        </div>
        <div class="item">
          <div class="label">配送地址</div>
          <div class="content">
            <div style="margin-bottom: 5rem">{{address.consignee}} {{address.phone}}</div>
            <div>{{address.district}} {{address.detail}}</div>
          </div>
        </div>
      </div>
      <div class="other">
        <div class="item">
          <div class="label">订单号码</div>
          <div class="content">{{getNumber(order.number)}}</div>
          <div class="btnCopy" @click="copyNumber">复制</div>
        </div>
        <div class="item">
          <div class="label">订单时间</div>
          <div class="content">{{order.orderTime}}</div>
        </div>
        <div class="item">
          <div class="label">支付方式</div>
          <div class="content">{{getPayMethod(order.payMethod)}}</div>
        </div>
        <div class="item" v-if="order.remark">
          <div class="label">订单备注</div>
          <div class="content">{{order.remark}}</div>
        </div>
      </div>
    </div>
    <van-popup v-model="orderTrackShow" round position="bottom" class="orderTrack">
      <div class="title">订单跟踪</div>
      <van-steps direction="vertical" :active="order.status==6 ? 1 : order.status-1"
                 class="content" inactive-color="#cccccc" active-color="#ffc200">
        <van-step>
          <div>订单已提交</div>
          <div>{{convertTime(order.orderTime)}}</div>
        </van-step>
        <van-step v-if="order.payTime">
          <div>支付成功</div>
          <div>{{convertTime(order.payTime)}}</div>
        </van-step>
        <van-step v-if="order.receiveTime">
          <div>商家已接单</div>
          <div>{{convertTime(order.receiveTime)}}</div>
        </van-step>
        <van-step v-if="order.deliverTime">
          <div>商品派送中</div>
          <div>{{convertTime(order.deliverTime)}}</div>
        </van-step>
        <van-step v-if="order.finishTime">
          <div>订单已完成</div>
          <div>{{convertTime(order.finishTime)}}</div>
        </van-step>
        <van-step v-if="order.cancelTime">
          <div>订单已取消</div>
          <div>{{convertTime(order.cancelTime)}}</div>
        </van-step>
      </van-steps>
      <div class="closeBtn" @click="orderTrackShow=false">关闭</div>
    </van-popup>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../plugins/vue/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="../plugins/vant/vant.min.js"></script>
  <!-- 引入axios -->
  <script src="../plugins/axios/axios.min.js"></script>
  <script src="../js/request.js"></script>
  <script src="../js/common.js"></script>
  <script src="../api/order.js"></script>
  <script>
    new Vue({
      el: "#order_detail",
      data() {
        return {
          order: {},
          address: {},
          orderTrackShow: false
        }
      },
      created() {
        this.initData()
      },
      methods: {
        initData() {
          this.id = getUrlParam("id")
          getOrderApi(this.id).then(res => {
            this.order = res.data
            let address = this.order.address
            this.address = address
            this.address.district = address.provinceName + address.cityName + address.districtName
          }).catch(error => {
            this.$notify({type: 'danger', message: error.message})
          })
        },

        // 获取订单状态信息
        getStatus(status) {
          let statusInfo = {}
          switch (status) {
            case 1:
              statusInfo.short = '等待支付'
              statusInfo.long = '请在30分钟内完成支付，超时将自动取消'
              break
            case 2:
              statusInfo.short = '订单已支付'
              statusInfo.long = '您的订单已支付，正在等待商家接单'
              break
            case 3:
              statusInfo.short = '已接单'
              statusInfo.long = '商家已接单，感谢您的光临'
              break
            case 4:
              statusInfo.short = '订单派送中'
              statusInfo.long = '您的订单正在派送中，请耐心等待'
              break
            case 5:
              statusInfo.short = '订单已完成'
              statusInfo.long = '您的订单已完成，期待再次光临'
              break
            case 6:
              statusInfo.short = '订单已取消'
              statusInfo.long = '您的订单已取消，期待再次光临'
              break
          }
          return statusInfo
        },

        // 获取支付方式
        getPayMethod(payMethod) {
          let str = ''
          switch (payMethod) {
            case 1:
              str = '微信支付'
              break
            case 2:
              str = '支付宝字符'
              break
          }
          return str
        },

        // 转换字符串时间格式 1970-01-01 00:00:00 -> 1月1日 00:00
        convertTime(time) {
          if (time) {
            let month = time.charAt(5) === '0' ? time.charAt(6) : time.substring(5, 7)
            let day = time.charAt(8) === '0' ? time.charAt(9) : time.substring(8, 10)
            let hour = time.substring(11, 13)
            let minute = time.substring(14, 16)
            return `${month}月${day}日 ${hour}:${minute}`
          }
          return ''
        },

        // 将订单号码每4位数字之间插入一个空格
        getNumber(number) {
          if (number) {
            let str = ''
            for (let i = 0, j = 0; i < number.length;) {
              j += 4
              str += j < number.length ? number.substring(i, j) + ' ' : number.substring(i)
              i = j
            }
            return str
          }
          return ''
        },

        // 再来一单
        addOrderAgain() {
          addOrderAgainApi({id: this.order.id}).then(res => {
            window.requestAnimationFrame(() => {
              window.location.href = '/front/index.html'
            })
          }).catch(error => {
            this.$toast(error.message)
          })
        },

        // 复制订单号到剪切板中
        copyNumber() {
          const input = document.createElement('input')
          input.setAttribute('readonly', 'readonly')
          input.setAttribute('value', this.order.number)
          document.body.appendChild(input)
          input.setSelectionRange(0, 9999)
          input.select()
          if (document.execCommand('copy')) {
            this.$toast('复制成功')
          }
          document.body.removeChild(input)
        },

        // 获取图片文件的URL
        getImage(image) {
          return getFileUrl(image, null, '')
        },

        goBack() {
          window.requestAnimationFrame(() => {
            history.back()
          })
        },
      }
    })
  </script>
</body>
</html>